<template>
  <div class="detail-list df fdc aic" @click="jumpHome()">
    <div class="title">{{ shopData.name }}</div>
    <van-rate v-model="value" color="#ffd21e" />
    <van-divider class="divider" :style="{color: '#fff', borderColor: '#fff'}">
      优惠信息
    </van-divider>
    <div v-for="(item, index) in shopData.supports" :key="index" class="msg">
      <div></div>
      <div>{{ item }}</div>
    </div>
    <van-divider class="divider" :style="{color: '#fff', borderColor: '#fff'}">
      商家公告
    </van-divider>
    <div>{{ shopData.bulletin }}</div>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
  data() {
    return {
      value: 3,
    }
  },
  methods: {
    ...mapActions('shop', ['A_getShopInfo']),
    jumpHome() {
      this.$router.push('/home')
    },
  },
  computed: {
    ...mapState('shop', ['shopData']),
  },
  created() {
    this.A_getShopInfo()
  },
}
</script>

<style lang="scss" scoped>
.detail-list {
  height: 100%;
  padding: 80px 10px;
  background: rgba(129, 223, 92, 0.6);
  color: white;
  .title {
    font-size: 30px;
    font-weight: 700;
    margin: 25px;
  }
  .divider {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 25px;
  }
  .msg {
    text-align: left;
    margin-bottom: 15px;
  }
}
</style>
